<template>
	<view class="goods-detail" :class="themeName">
		<navbar title="商品详情" :background="{ background: `rgba(256,256,256,${percent})` }"
			:titleColor="`rgba(0,0,0,${percent})`" :immersive="true"></navbar>
		<!-- 轮播图 -->
		<goods-swiper :images="goodsInfo.goods_image" :video="goodsInfo.video" :video-cover="goodsInfo.video_cover" />
		<bubble top="220rpx" :page="2" :discharge="isDischarge"></bubble>
		<!-- 拼团信息 -->
		<view class="goods-team">
			<view class="goods-team__price">
				<price :content="activityInfo.min_team_price" main-size="46rpx" minor-size="32rpx"
					:prefix="$zhTran('拼团价') + goodsInfo.price_symbol" color="#FFFFFF" />
				<goods-team-icon :count="activityInfo.people_num" theme="normal" />
			</view>

			<view class="goods-team__time">
				<text class="xs" :style="{ color: themeColor }">{{$zhTran('距离结束还剩')}}</text>
				<count-down :time-end="activityInfo.end_time" />
			</view>
		</view>

		<!-- 商品基础信息 -->
		<view class="goods-info">
			<view class="flex row-between">
				<price :content="goodsInfo.min_price" main-size="46rpx" minor-size="32rpx" :color="themeColor"
					:prefix="goodsInfo.price_symbol">
					<view slot="suffix" class="muted line-through m-l-12 xxs">
						<price :content="goodsInfo.min_lineation_price" :prefix="$zhTran('原价') + goodsInfo.price_symbol"
							:line-through="true" v-if="Number(goodsInfo.min_lineation_price)" />
					</view>
				</price>
				<view class="sm lighter share" @tap="showShare = true">
					<u-icon name="share" />
					<text class="m-l-10">{{$zhTran('分享')}}</text>
				</view>
			</view>
			<view class="goods-name lg">{{ goodsInfo.name }}</view>
			<view class="flex row-between muted xs">
				<template v-if="goodsInfo.stock_show">
					<view>{{$zhTran('库存')}}: {{ goodsInfo.total_stock }}</view>
				</template>
				<view>{{$zhTran('销量')}}: {{ goodsInfo.sales_num }}</view>
				<view>{{$zhTran('浏览量')}}: {{ activityInfo.browse_volume }}</view>
			</view>
		</view>
		<view class="nr specification">
			<text class="muted flex-none">{{$zhTran('运费')}}</text>
			<text class="m-l-20">{{ goodsInfo.free_shipping_tips || $zhTran('以提交订单时为准') }}</text>
		</view>
		<!-- S 规格 -->
		<view class="nr specification" @click="onGoodsOptions">
			<text class="muted">{{$zhTran('已选')}}</text>
			<text class="m-l-20">{{ specValueStr }}</text>
			<u-icon name="arrow-right" class="muted" style="margin-left: auto" />
		</view>

		<!-- 规格选择Popup -->
		<goods-spec v-model="showGoodsSpec" :defaultInfo="{
			image: goodsInfo.image,
			price: activityInfo.min_team_price,
			stock: goodsInfo.total_stock,
			unit: goodsInfo.unit_name,
		}" :goods="goodsInfo.id" :buttons="specButtonsList" :spec-list="goodsInfo.spec_value"
			:prefix="goodsInfo.price_symbol" :spec-map="goodsInfo.spec_value_list" @join="handleJoin" @team="handleTeam"
			@change="changeGoodsSpec" :understock_order_enabled="goodsInfo.understock_order_enabled" />
		<!-- E 规格 -->

		<!-- S 拼团 -->
		<!-- 拼团玩法 -->
		<view class="team-desc">
			<view class="team-desc__title">{{$zhTran('拼团玩法')}}</view>
			<view class="team-desc__main">
				<view class="team-desc__item"><text class="num">1</text> {{$zhTran('开团/参团')}}</view>
				<view class="team-desc__item--space"></view>
				<view class="team-desc__item"><text class="num">2</text>{{$zhTran('团满即成新团')}}</view>
				<view class="team-desc__item--space"></view>
				<view class="team-desc__item"><text class="num">3</text>{{$zhTran('满员发货')}}</view>
			</view>
		</view>

		<!-- 拼团队伍 -->
		<view class="team-activity" v-if="activityTeamList.length">
			<view class="team-activity__title">{{$zhTran('正在拼团中')}}</view>
			<view class="team-activity__item" v-for="(item, index) in activityTeamList" :key="item.id">
				<view class="flex-1 flex row-between">
					<view class="flex">
						<u-image :src="item.avatar" width="80" height="80" shape="circle" />
						<text class="m-l-20 nr">{{ item.nickname }}</text>
					</view>
					<view class="flex-col col-bottom">
						<view class="sm">
							<text>{{$zhTran('还差')}}</text>
							<text :style="{ color: themeColor }">{{ item.people - item.join }}</text>
							<text>{{$zhTran('人成团')}}</text>
						</view>
						<view class="flex xs muted">
							<text class="m-r-10">{{$zhTran('剩余')}}</text>
							<count-down :time-end="item.invalid_time" color="#999999" separator-color="#999999"
								bg-color="transparent" height="24" />
						</view>
					</view>
				</view>
				<view class="team-activity__item-button" @click="joinTeamOrder(item.id)">{{$zhTran('去参团')}}</view>
			</view>
		</view>
		<!-- E 拼团 -->

		<!-- diy -->
		<view v-for="(item, index) in pagesData" :key="index">
			<template v-if="item.name == 'reviews'">
				<w-reviews v-if="item.show" :content="item.content" :styles="item.styles" :comment="goodsComment"
					:goods-id="goodsInfo.id" />
			</template>
			<template v-if="item.name == 'goodsrecom'">
				<w-goodsrecom v-if="item.show" :content="item.content" :styles="item.styles" />
			</template>
		</view>

		<!-- 商品介绍 -->
		<view class="detail">
			<view class="detail-title nr">{{$zhTran('商品详情')}}</view>
			<u-parse :html="goodsInfo.content" :show-with-animation="true"></u-parse>
		</view>

		<w-jishuzhichi />

		<!-- 功能按钮组 -->
		<view class="functions">
			<view class="icon-group">
				<view class="icon-item" @tap="goService">
					<u-icon name="kefu-ermai" size="42" />
					<text>{{$zhTran('客服')}}</text>
				</view>
				<view class="icon-item" @tap="changeCollect(isGoodsCollect)">
					<template v-if="isGoodsCollect">
						<u-icon name="star-fill" size="42" :color="themeColor" />
					</template>
					<template v-else>
						<u-icon name="star" size="42" />
					</template>
					<text>{{$zhTran('收藏')}}</text>
				</view>
				<!-- 	<view class="icon-item" @tap="goCart">
					<u-icon name="shopping-cart" size="42" />
					<text>购物车</text>
				</view> -->
			</view>
			<view class="button-group">
				<view class="button-item button-item--normal" @click="handleBuy">{{$zhTran('单独购买')}}</view>
				<view class="button-item button-item--primary" @click="onTeam">{{$zhTran('立即开团')}}</view>
			</view>
		</view>

		<!-- 分享 -->
		<share-popup v-model="showShare" :share-id="team_id"
			page-path="bundle/pages/goods_team_detail/goods_team_detail" :type="3" />
		<!-- 页面状态 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty :text="pageErrorMsg" :src="$getImageUri('resource/image/shopapi/uniapp/empty/shop.png')"
					:icon-size="280"></u-empty>
			</template>
		</page-status>
		<u-back-top :scroll-top="scrollTop" :top="1000" :customStyle="{
			backgroundColor: '#FFF',
			color: '#000',
			boxShadow: '0px 3px 6px rgba(0, 0, 0, 0.1)',
		}"></u-back-top>
	</view>
</template>

<script>
	import {
		apiGoodsTeamDetail,
		apiGoodsTeamPlace
	} from "@/api/goods";
	import {
		apiCouponGet
	} from "@/api/store";
	import {
		apiGoodsCollect,
		apiGoodsMarketing
	} from "@/api/goods";
	import {
		baseURL,
		basePath
	} from "@/config/app";
	import {
		apiGetPage
	} from "@/api/store";
	import {
		PageStatusEnum,
		OrderTypeEnum
	} from "@/utils/enum";
	import {
		mapGetters
	} from "vuex";
	import {
		strToParams
	} from "@/utils/tools";

	export default {
		name: "GoodsDetail",

		data() {
			return {
				isDischarge: false,
				// 页面状态
				pageStatus: PageStatusEnum["LOADING"],
				pagesData: [],
				pageErrorMsg: "", // 页面异常信息
				scrollTop: 0,
				percent: 0,
				showShare: false,
				goodsInfo: {}, // 商品信息
				goodsComment: {}, // 用户评价
				team_id: "", // 拼团ID
				goods_id: "", // 商品ID

				isGoodsCollect: false, // 商品收藏

				showGoodsSpec: false, // 商品规格: 显示 | 隐藏

				goodsTeamFoundID: "", // 参团ID
				goodsSpecOptions: {}, // 已选商品规格
				specButtonsList: [], // 规格按钮

				// 规格按钮组
				specButtonsGroups: {
					team: {
						event: "team",
						text: this.$zhTran("立即开团"),
					},
					join: {
						event: "join",
						text: this.$zhTran("确认"),
					},
				},
			};
		},

		computed: {
			...mapGetters(["isLogin"]),

			// 拼团活动信息
			activityInfo() {
				return this.goodsInfo.activity ?? {};
			},

			// 选中规格信息
			goodsSpecInfo() {
				return this.goodsSpecOptions.spec ?? {};
			},

			// 开团列表
			activityTeamList() {
				return this.goodsInfo.found ?? [];
			},

			// 已选商品规格
			specValueStr() {
				return this.goodsSpecOptions?.spec?.spec_value_str ?? "";
			},
		},

		methods: {
			// 获取装修页面
			getPage() {
				apiGetPage({
					type: 5,
					goods_id: this.goodsInfo.id,
				}).then((data) => {
					const {
						common,
						content
					} = data;

					this.pagesData = content;
					this.pagesData = this.$zhTran(this.pagesData)
					uni.setNavigationBarTitle({
						title: common.title,
					});
				});
			},

			// 更改规格
			changeGoodsSpec(options) {
				this.goodsSpecOptions = options;
				console.log(options);
			},

			// 点击参团按钮
			onTeam() {
				this.showGoodsSpec = true;
				this.specButtonsList = [this.specButtonsGroups.team];
			},

			// 更改商品收藏状态
			changeCollect(value) {
				value = !!value ? 0 : 1;
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");

				apiGoodsCollect({
						goods_id: this.goods_id,
						is_collect: value,
					})
					.then((data) => {
						this.isGoodsCollect = value;
					})
					.catch((err) => {
						console.log(err);
					});
			},

			// 去客服
			goService() {
				this.$Router.push({
					path: "/bundle/pages/service/service",
					query: {
						type: "team",
						goods_id: this.goods_id,
						activity_id: this.team_id,
					},
				});
			},

			// 去购物车
			goCart() {
				this.$Router.replaceAll({
					path: "/bundle2/pages/shop_cart/shop_cart",
				});
			},

			// 点击已选规格
			onGoodsOptions() {
				this.showGoodsSpec = true;
				this.specButtonsList = [this.specButtonsGroups.team];
			},

			// 处理 开团
			handleTeam({
				spec,
				number
			}) {
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");

				// this.$Router.push({
				// 	path: "/bundle2/pages/goods_order/goods_order",
				// 	query: {
				// 		from: OrderTypeEnum["TEAM"],
				// 		payload: {
				// 			team_id: this.goodsInfo.activity.id,
				// 			goods: [{
				// 				goods_num: number,
				// 				item_id: spec.id,
				// 			}, ],
				// 		},
				// 	},
				// });
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/goods_order/goods_order",
					events: {
						reCountCarNum(res) {
							that.$store.dispatch("getCartNum");
						}
					},
					success(res) {
						res.eventChannel.emit("receiveData", {
							from: OrderTypeEnum["TEAM"],
							payload: {
								team_id: that.goodsInfo.activity.id,
								goods: [{
									goods_num: number,
									item_id: spec.id,
								}, ],
							},
						});
					}
				});
			},

			// 处理 参团
			handleJoin({
				spec,
				number
			}) {
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");

				// this.$Router.push({
				// 	path: "/bundle2/pages/goods_order/goods_order",
				// 	query: {
				// 		from: OrderTypeEnum["TEAM"],
				// 		payload: {
				// 			found_id: this.goodsTeamFoundID,
				// 			team_id: this.goodsInfo.activity.id,
				// 			goods: [{
				// 				goods_num: number,
				// 				item_id: spec.id,
				// 			}, ],
				// 		},
				// 	},
				// });
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/goods_order/goods_order",
					events: {
						reCountCarNum(res) {
							that.$store.dispatch("getCartNum");
						}
					},
					success(res) {
						res.eventChannel.emit("receiveData", {
							from: OrderTypeEnum["TEAM"],
							payload: {
								found_id: that.goodsTeamFoundID,
								team_id: that.goodsInfo.activity.id,
								goods: [{
									goods_num: number,
									item_id: spec.id,
								}, ],
							},
						});
					}
				});
			},

			// 点击参团
			joinTeamOrder(foundID) {
				this.showGoodsSpec = true;
				this.goodsTeamFoundID = foundID;
				this.specButtonsList = [this.specButtonsGroups.join];
			},

			// 处理 单独购买
			handleBuy() {
				this.$Router.replace({
					path: "/bundle2/pages/goods_detail/goods_detail",
					query: {
						id: this.goods_id,
					},
				});
			},

			// 初始化商品详情数据
			initGoodsDetail() {
				return new Promise((resolve, reject) => {
					apiGoodsTeamDetail({
							id: this.team_id,
							visit: 1,
						})
						.then((data) => {
							this.goodsInfo = data;
							this.goodsInfo = this.$zhTran(this.goodsInfo)
							this.goods_id = data.id;
							const hasComment = JSON.stringify(data.goods_comment) !== "[]";
							this.goodsComment = hasComment ? data.goods_comment : {};
							this.goodsComment = this.$zhTran(this.goodsComment)
							this.isGoodsCollect = !!data.is_collect;
							return data;
						})
						.then((data) => {
							// #ifdef H5
							// 设置分享
							this.$store.dispatch("setWxShare", {
								shareImage: data?.image,
								shareDesc: this.$zhTran(data?.name),
							});
							// #endif
							resolve(data);
						})
						.catch((err) => {
							reject(err);
						});
				});
			},
		},
		onPageScroll(e) {
			const top = uni.upx2px(100);
			const {
				scrollTop
			} = e;
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top;
			this.scrollTop = scrollTop;
		},
		async onLoad() {
			const options = this.$Route.query;

			// 商品ID赋值：点击 | 扫码
			options["scene"] ?
				(this.team_id = strToParams(options["scene"])["id"]) :
				(this.team_id = options.id);

			try {
				if (!this.team_id) throw new Error(this.$zhTran("该商品不存在"));

				// 商品详情数据
				await this.initGoodsDetail();
				// 页面DIY
				await this.getPage();
				this.pageStatus = PageStatusEnum["NORMAL"];
			} catch (errMsg) {
				console.log(errMsg);
				this.pageErrorMsg = errMsg;
				this.pageStatus = PageStatusEnum["ERROR"];
			}
		},

		onShareAppMessage() {
			const {
				name,
				image
			} = this.goodsInfo;
			return {
				title: name,
				path: `bundle/pages/goods_team_detail/goods_team_detail?id=${this.team_id}&invite_code=${this.userInfo.code}`,
				imageUrl: image,
			};
		},
		onHide() {
			this.isDischarge = true;
		},
		onShow() {
			this.isDischarge = false;
		},
	};
</script>

<style lang="scss" scoped>
	.goods-detail {
		padding-bottom: calc(100rpx + 20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + 20rpx + env(safe-area-inset-bottom));
	}

	.goods-team {
		display: flex;
		height: 100rpx;

		&__price {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			@include background_linear();
		}

		&__time {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			@include background_color(0.3);
		}
	}

	.goods-info {
		padding: 20rpx 24rpx;
		background-color: #ffffff;

		.share {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 134rpx;
			height: 60rpx;
			margin-right: -24rpx;
			border-radius: 30px 0 0 30px;
			background-color: #f6f6f6;
		}

		.goods-name {
			padding: 20rpx 0 10rpx 0;
			font-weight: 500;
		}
	}

	.discounts {
		display: flex;
		padding: 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;

		.coupon-tag {
			box-sizing: border-box;
			position: relative;
			display: flex;
			justify-content: center;
			min-width: 140rpx;
			height: 36rpx;
			padding: 0 20rpx;
			border-radius: 4px;
			margin-right: 10rpx;
			color: #ffffff;
			@include background_color();

			&::before,
			&::after {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				display: block;
				content: "";
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #ffffff;
			}

			&::before {
				right: -5rpx;
			}

			&::after {
				left: -5rpx;
			}
		}
	}

	.team-activity {
		padding: 0 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;

		&__title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: $-font-size-nr;
		}

		&__item {
			display: flex;
			align-items: center;
			height: 120rpx;

			&-button {
				display: flex;
				align-items: center;
				height: 58rpx;
				border-radius: 60px;
				padding: 0 28rpx;
				margin-left: 30rpx;
				color: #ffffff;
				@include background_color();
			}
		}
	}

	.team-desc {
		padding: 0 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;

		&__title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: $-font-size-nr;
		}

		&__main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			border-top: $-solid-border;
		}

		&__item {
			font-size: $-font-size-xs;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			.num {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 28rpx;
				width: 28rpx;
				border: 1px solid $-color-normal;
				border-radius: 50%;
				margin-right: 4rpx;
			}

			&--space {
				flex: 1;
				border-top: $-dotted-border;
				margin: 0 20rpx;
			}
		}
	}

	.specification {
		display: flex;
		padding: 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.detail {
		padding: 24rpx;
		margin-top: 20rpx;
		background-color: #ffffff;

		&-title {
			text-align: center;
			font-weight: 500;
			padding-bottom: 24rpx;
		}

		::v-deep image {
			vertical-align: top;
		}

		// #ifdef H5
		::v-deep img {
			vertical-align: top;
			display: inline;
		}

		// #endif
		// #ifdef MP-WEIXIN || APP-PLUS
		::v-deep ._img {
			vertical-align: top;
			display: inline;
		}

		// #endif
	}

	.functions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 24rpx constant(safe-area-inset-bottom) 24rpx;
		padding: 0 24rpx env(safe-area-inset-bottom) 24rpx;
		border-top: $-solid-border;
		background-color: #ffffff;

		.icon-group {
			display: flex;
			justify-content: space-around;
			font-size: $-font-size-xxs;
			color: $-color-lighter;

			.icon-item {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.button-group {
			flex: 1;
			display: flex;
			justify-content: space-between;

			.button-item {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 74rpx;
				margin-left: 14rpx;
				border-radius: 60px;

				&--normal {
					@include font_color();
					@include border_color();

					border-width: 1px;
					border-style: solid;
				}

				&--primary {
					@include background_color();
					color: #ffffff;
				}
			}
		}
	}

	.coupons {
		background-color: #f6f6f6;

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: $-font-size-md;
			background-color: #ffffff;
		}

		&-main {
			padding: 20rpx;

			.coupons-item {
				&:nth-child(n + 2) {
					margin-top: 20rpx;
				}
			}
		}
	}
</style>